<template>
	<view class="category-content">
		<view class="category-content-page">
			<!-- 左侧分类 -->
			<!-- <scroll-view class="left" scroll-y v-if="categorys1.length"> -->
			<scroll-view class="left">
				<!-- <view 
					v-for="item, index in categorys1" 
					:key="index"
					:class="activeIndex == index? 'active':''" 
					@click="item1Click(index)" 
				>
					{{item.name}}
				</view> -->
				
				<view class="active">
					热门推荐
				</view>
				
				<view>
					热门推荐
				</view>
				
				<view>
					热门推荐
				</view>
				
				<view>
					热门推荐
				</view>
				
			</scroll-view>
			<!-- 右侧分类 -->
			<!-- <scroll-view class="right" scroll-y> -->
			<view class="right">
	
				<!-- <view class="cate2" v-for="item, index in categorys2[activeIndex]" :key="index">
	
					<image class="icon" :src="item.extra" mode=""></image>
	
					<view class="tit">
						{{item.name}}
					</view>
				</view> -->
				
				<view class="cate2">
					
					<image class="icon" src="https://img10.360buyimg.com/focus/s140x140_jfs/t1/119891/13/5448/24096/5ef01048E096cfd33/260803efca5e8a73.jpg" mode=""></image>
					
					<view class="tit">
						冰箱
					</view>
				</view>
				
				<view class="cate2">
					
					<image class="icon" src="https://img10.360buyimg.com/focus/s140x140_jfs/t1/119891/13/5448/24096/5ef01048E096cfd33/260803efca5e8a73.jpg" mode=""></image>
					
					<view class="tit">
						冰箱
					</view>
				</view>
				
				<view class="cate2">
					
					<image class="icon" src="https://img10.360buyimg.com/focus/s140x140_jfs/t1/119891/13/5448/24096/5ef01048E096cfd33/260803efca5e8a73.jpg" mode=""></image>
					
					<view class="tit">
						冰箱
					</view>
				</view>
				
				<view class="cate2">
					
					<image class="icon" src="https://img10.360buyimg.com/focus/s140x140_jfs/t1/119891/13/5448/24096/5ef01048E096cfd33/260803efca5e8a73.jpg" mode=""></image>
					
					<view class="tit">
						冰箱
					</view>
				</view>
				
				<view class="cate2">
					
					<image class="icon" src="https://img10.360buyimg.com/focus/s140x140_jfs/t1/119891/13/5448/24096/5ef01048E096cfd33/260803efca5e8a73.jpg" mode=""></image>
					
					<view class="tit">
						冰箱
					</view>
				</view>
	
			</view>
			<!-- </scroll-view> -->
		</view>
	</view>
</template>

<script>
	export default {
		
	}
</script>

<style lang="scss">

	.category-content {
		width: 750rpx;
		height: 100%;
		// background-color: #FFFFFF;
		.category-content-page {
			width: 100%;
			// height: 100%;
			display: flex;
			flex-direction: row;
			
			.left {
				width: 200rpx;
				// height: 100%;
				view {
					height: 100rpx;
					line-height: 100rpx;
					background-color: #EEEEEE;
					text-align: center;
					
					font-size: 24rpx;
				}
				// 分类被选中后的颜色
				.active {
					background-color: #FFFFFF;
					border-left: 2px solid #53db11;
					color: #53db11;
				}
			}
			
			.right {
				width: 550rpx;
				height: 100%;
				// background-color: #FFFFFF;
				display: flex;
				flex-wrap: wrap;
				
				.cate2 {
					width: 24%;
					height: 140rpx;
					
					display: flex;
					flex-direction: column;
					// justify-content: left;
					align-items: center;
					
					.icon {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
					}
					
					.tit {
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>
